<template>
  <footer class="footer">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-4 order-2 order-lg-1 mb-3 mb-lg-0">
          <ul class="list-unstyled nav-links m-0 nav-left">
            <li><a href="#">关于我们</a></li>
            <li><a href="#">求支持</a></li>
            <li><a href="#">色卡调整详情</a></li>
            <li><a href="#">联系</a></li>
          </ul>
        </div>
        <div class="col-lg-4 text-lg-right order-3 order-lg-3">
          <ul class="list-unstyled nav-links m-0 nav-left">
            <li>
              <p class="m-0 text-muted">
                <small>&copy; 2022<a href="#">MiJac</a></small>
              </p>
            </li>
            <li>
              <p class="m-0 text-muted">
                <small><a href="#">备案:粤0000000</a></small>
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: "index",
};
</script>

<style scoped lang="scss">
.footer {
  background-color: #fff; /* 背景颜色 */
  font-family: "Poppins", sans-serif;
  padding: 2rem 0;
}

a,
a:hover {
  text-decoration: none !important;
}

.footer .site-logo a {
  font-size: 30px;
  color: #3e64ff;
  font-weight: 900;
}
.footer .nav-links li {
  display: inline-block;
}
.footer .nav-links li a {
  color: #777;
  padding: 10px;
}
.footer .nav-links li a:hover {
  color: #d21515; /* 链接hover颜色 */
}
.footer .nav-links.nav-left li:first-child {
  padding-left: 0;
}
.footer .nav-links.nav-right li:last-child {
  padding-right: 0;
}
.footer .copyright {
  padding-top: 50px;
  text-align: center;
  color: #777;
}
.footer .subscribe .form-group {
  margin-bottom: 0;
  padding-bottom: 0;
  position: relative;
}
.footer .subscribe .form-group input[type="email"] {
  height: 45px;
  border: none;
  background: #e6e6e6;
}
.footer .subscribe .form-group input[type="email"]:focus,
.footer .subscribe .form-group input[type="email"]:active {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.footer .subscribe .form-group input[type="email"]::-webkit-input-placeholder {
  color: #b3b3b3;
  font-size: 14px;
}
.footer .subscribe .form-group input[type="email"]::-moz-placeholder {
  color: #b3b3b3;
  font-size: 14px;
}
.footer .subscribe .form-group input[type="email"]:-ms-input-placeholder {
  color: #b3b3b3;
  font-size: 14px;
}
.footer .subscribe .form-group input[type="email"]:-moz-placeholder {
  color: #b3b3b3;
  font-size: 14px;
}
.footer .subscribe .form-group button {
  position: absolute;
  border: none;
  background: none;
  font-size: 1.5rem;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  top: 0.5rem;
  right: 0.3rem;
  line-height: 0;
}
.footer .subscribe .form-group button:focus,
.footer .subscribe .form-group button:active {
  outline: none;
}
.footer .social li {
  display: inline-block;
  position: relative;
}
.footer .social li a {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-block;
  margin: 0;
  padding: 0;
  background-color: #e6e6e6;
  color: #333333;
}
.footer .social li a > span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.footer .social li a:hover {
  color: #3e64ff;
}
</style>
